<template>
<div :class="[$style.container]">
  <ul :class="[$style.list]"
    v-infinite-scroll="onLoad"
    :infinite-scroll-disabled="disabled"
    :infinite-scroll-immediate="false">
    <li :class="[$style.item, selectCls(row), checkedCls(row), disabledCls(row)]" v-for="(row) in data.rows" :key="row.id"
      @dblclick="onOpen(row)"
      @click.exact="onSelect(row)">
      <div :class="[$style.col, $style.col0]" @click.stop="">
        <el-checkbox v-model="row.checked"></el-checkbox>
      </div>
      <div :class="[$style.col, $style.col1]">
        <div :class="[$style.docIcon]"><doc-icon :data="row.doc || row"></doc-icon></div>
        <div :class="[$style.docContent]">
          <div :class="[$style.docText]">
            <span :underline="false" @click="onOpen(row)" :class="[$style.docTextContent]" :title="row.doc ? row.doc.name : row.name">{{row.doc ? row.doc.name : row.name}}</span>
          </div>
        </div>
      </div>
      <div :class="[$style.col, $style.col2]">
        <span>{{row.creationTime}}</span>
        <el-divider direction="vertical" />
        <span>{{(row.doc ? row.doc.size : row.size) | size}}</span>
      </div>
      <div :class="[$style.col, $style.col3]" :title="row.doc ? row.doc.path : row.path">{{row.doc ? row.doc.path : row.path}}</div>
      <div :class="[$style.col, $style.col4]" @click.stop="">
        <el-dropdown trigger="click" v-if="row.doc">
          <span><el-link :underline="false"><i class="el-icon-more"></i></el-link></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="openDoc(row)">前往文档位置</el-dropdown-item>
            <el-dropdown-item @click.native="previewDoc(row)" v-if="canPreview(row)">预览</el-dropdown-item>
            <el-dropdown-item @click.native="editDoc(row)" v-if="canEdit(row)">在线编辑</el-dropdown-item>
            <el-dropdown-item @click.native="downloadDoc(row)" v-if="canDownload(row)">下载</el-dropdown-item>
            <el-dropdown-item @click.native="remove(row)"><span class="text-error">移除记录</span></el-dropdown-item>
            <!-- <el-dropdown-item @click.native="openDoc(row)" v-if="canOpen(row)">打开</el-dropdown-item>
            <el-dropdown-item @click.native="openDoc(row)" v-if="canPreview(row)">预览</el-dropdown-item>
            <el-dropdown-item @click.native="onlineEditDoc(row)" v-if="canEdit(row)">在线编辑</el-dropdown-item>
            <el-dropdown-item @click.native="cpDoc(row)" v-if="canCopy(row)">复制(CTRL + C)</el-dropdown-item>
            <el-dropdown-item @click.native="mvDoc(row)" v-if="canMove(row)">移动(CTRL + X)</el-dropdown-item>
            <el-dropdown-item @click.native="downloadDoc(row)" v-if="canDownload(row)">下载</el-dropdown-item>
            <el-dropdown-item @click.native="renameDoc(row)" v-if="canRename(row)">重命名</el-dropdown-item>
            <el-dropdown-item @click.native="updateDocTags(row)" v-if="canTag(row)">打标签</el-dropdown-item>
            <el-dropdown-item @click.native="lockDoc(row)" v-if="canLock(row)">锁定</el-dropdown-item>
            <el-dropdown-item @click.native="unlockDoc(row)" v-if="canUnlock(row)">解锁</el-dropdown-item>
            <el-dropdown-item @click.native="delDoc(row)" v-if="canDelete(row)"><span class="text-error">删除</span></el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </li>
  </ul>
  <p class="text-center text-secondary" v-if="data.loading">加载中...</p>
  <p class="text-center text-secondary" v-if="!data.hasMore && !data.loading && data.rows.length > 0">没有更多了</p>
</div>
</template>

<script lang="ts">

import { hasPerm, PermissionName } from '@/config/acl'
import { PageData } from '@/config/page'
import { Vue, Component, Provide, Watch, Ref, Prop, Inject, Emit } from 'vue-property-decorator'
import { canEdit, canPreview } from '@/config/content-type'

const sameRow = (r1: any, r2: any) => {
  return r1 === r2 || (!!r1?.id && r1?.id === r2?.id)
}

@Component
export default class RecentList extends Vue {
  @Prop() data!: PageData<any>

  @Prop() selectedRow!: any

  @Emit('update:selectedRow') updateSelectedRow (row: any) {}

  @Inject() openDoc!: (row: any) => void

  @Inject() downloadDoc!: (row?: any) => void

  @Inject() previewDoc!: (row?: any) => void

  @Inject() editDoc!: (row?: any) => void

  @Inject() remove!: (row?: any) => void

  get disabled () {
    return this.data.loading || !this.data.hasMore
  }

  get checkedRows () {
    const rows = this.data.rows
    return rows.filter(v => v.checked)
  }

  disabledCls (row: any) {
    return row.doc ? '' : this.$style.disabled
  }

  checkedCls (row: any) {
    return row.checked ? this.$style.checked : ''
  }

  selectCls (row: any) {
    return sameRow(row, this.selectedRow) ? this.$style.selected : ''
  }

  hasPerm (name: PermissionName, ...rows: any[]) {
    return hasPerm(name, ...rows)
  }

  canDownload (row?: any) {
    const rows = row ? [row] : this.checkedRows
    return hasPerm('download', ...rows.map(v => v.doc))
  }

  canPreview (row?: any) {
    if (!row) return false
    const doc = row.doc
    return doc.type === 'file' && this.hasPerm('preview', doc) && canPreview(doc.name)
  }

  canOpen (row?: any) {
    return true
  }

  canEdit (row?: any) {
    if (!row) return false
    const doc = row.doc
    return this.hasPerm('edit', doc) && canEdit(doc.name)
  }

  onOpen (row: any) {
    if (!row.doc) return
    const doc = row.doc
    if (doc.type === 'dir') {
      this.openDoc(row)
    } else {
      this.previewDoc(row)
    }
  }

  onLoad () {
    this.data.loadNext()
  }

  onSelect (row: any) {
    this.updateSelectedRow(row)
  }

  $style!: any
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

$col4-width: 36px;

.container {
}

.iconBadge {
  position: absolute;
  width: 16px;
  padding: 2px 4px;
  top: 0;
  right: -12px;
  border-radius: 12px;
  background-color: $color-primary;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 12px;
  border-bottom: 1px solid $border-split-color;
  height: 48px;
  padding: 8px 0;

  &:hover, &.checked, &.selected {
    background-color: $bg-body-color;
  }

  &:hover, &.selected {
    .actions {
      display: block;
    }
  }

  &:hover, &.checked {
    .col0 {
      visibility: visible;
    }
  }

  &.disabled {
    opacity: .6;
    cursor: not-allowed;
  }
}

.col {
  flex: 0 0 auto;
}

.col0 {
  width: 40px;
  padding-left: 8px;
  // background-color: cyan;
  visibility: hidden;
}

.col1 {
  width: 40%;
  min-width: 220px;
  flex: 1 1 auto;
  display: flex;
  // background-color: chartreuse;
}

.col2 {
  width: 15%;
  min-width: 220px;
  // background-color: chocolate;
}

.col3 {
  width: 40%;
  min-width: 60px;
  // background-color: cornflowerblue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col4 {
  width: $col4-width;
  padding-right: 12px;
  // background-color: cyan;
  text-align: right;
}

.docIcon {
  flex: 0 0 auto;
  width: 48px;
  color: $color-primary;
  font-size: 32px;
}

.docContent {
  flex: 1 1 auto;
  width: 0;
}

.docText {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 12px 0;
}

.docTextContent {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    color: $color-primary;
    opacity: .8;
    cursor: pointer;
  }
}

.docTextAction {
  flex: 0 0 auto;
}
</style>
